<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="详情" width="60%" destroyOnClose :footer="null">
    <Description :column="1" :data="dataInfo" :schema="formSchema" />
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, useAttrs, h} from 'vue';
import { Description, useDescription } from '/@/components/Description/index';
import BasicModal from "/@/components/Modal/src/BasicModal.vue";
import {useModalInner} from "/@/components/Modal";
import { Tag, Image } from "ant-design-vue";
import { createImgPreview } from '/@/components/Preview/index';
const emit = defineEmits(['register']);
const dataInfo = ref({});
const  formSchema =    [
  {
    label: '计划编号',
    field: 'productScheduleId',
    render: (curVal, data) => {
      if (Object.keys(data).length) {
        return `${data.productionSchedule.no}`;
      } else {
        return '';
      }
    }
  },
  {
    label: '种植作物',
    field: 'products',
    render: (curVal, data) => {
      if (Object.keys(data).length) {
        let html = [];
        data.products.forEach(item => {
          let attr = {
            innerHTML: item.name,
            color: 'green'
          }
          html.push(h(Tag, attr))
        })
        return html;
      } else {
        return '';
      }
    }
  },
  {
    label: '农事操作',
    field: 'productionOperation',
    render: (curVal, data) => {
      if (Object.keys(data).length) {
        return `${data.productionSchedule.productionOperation_dictText}`;
      } else {
        return '';
      }
    }
  },
  {
    label: '投入品',
    field: 'inputUses',
    render: (curVal, data) => {
      if (Object.keys(data).length) {
        let html = [];
        data.inputUses.forEach(item => {
          let attr = {
            innerHTML: item.inputId_dictText,
            color: 'blue'
          }
          html.push(h(Tag, attr))
        })
        return html;
      } else {
        return '';
      }
    }
  },
  {
    label: '计划用量',
    field: 'actualUsage',
  },
  {
    label: '实际用量',
    field: 'dosage',
    render: (curVal, data) => {
      if (Object.keys(data).length) {
        let html = [];
        data.inputUses.forEach(item => {
          let attr = {
            innerHTML: item.dosage+'KG',
            color: 'cyan'
          }
          html.push(h(Tag, attr))
        })
        return html;
      } else {
        return '';
      }
    }
  },
  {
    label: '操作时间',
    field: 'time',
    render: (curVal, data) => {
      return !curVal?"":(curVal.length>10?curVal.substr(0,10):curVal)
    }
  },
  {
    label: '操作人',
    field: 'operator',
  },
  {
    label: '照片',
    field: 'picturesList',
    render: (curVal, data) => {
      if (Object.keys(data).length) {
        let html = [];
        data.picturesList.forEach((img, idx) => {
          let attr = {
            width: 150,
            height: 150,
            src: img,
            preview: { visible: false },
            onClick: (event) => {
              createImgPreview({ imageList: data.picturesList });
            }
          }
          html.push(h(Image, attr))
        })
        return html;
      } else {
        return '';
      }
    }
  },
  {
    label: '是否上链',
    field: 'cngData',
    render:(curVal, data) =>{
      return data.cngData ? '已上链' : '未上链'
    },
  },
  {
    label: '位置',
    field: 'location',
    render:(curVal, data) =>{
      return data.longitude ? data.longitude + "," + data.latitude : ''
    },
  },
]
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false });
  dataInfo.value = data.record;
  console.log(dataInfo.value);
});
</script>
<style lang="less" scoped>
  :deep(.ant-image) {
    margin-right: 10px;
  }
  :deep(.ant-image-img) {
    max-height: 100%;
  }
</style>
